<template>
  <RightTableLayout :slotName="['search', 'operation', 'table']">
    <template #search>
      <div class="icon-search-box">{{ i18n.fy.内置图标一览表 }}</div>
    </template>
    <template #operation>
      <el-button @click="selectIcon(1)">Layui Icon</el-button>
      <el-button @click="selectIcon(2)">Element Plus Icon</el-button>
    </template>
    <template #table>
      <div class="site-doc-icon-list">
        <div v-for="item in iconList" :key="item.name" class="site-doc-icon-item">
          <i :class="'layui-icon ' + item.fontclass"></i>
          <div class="site-doc-icon-name">{{ item.name }}</div>
          <div class="site-doc-icon-code">{{ item.code }}</div>
          <div class="site-doc-icon-cls">{{ item.fontclass }}</div>
        </div>
      </div>
    </template>
  </RightTableLayout>
</template>

<script setup>
defineOptions({ name: "IconList" });
import RightTableLayout from "@/views/workbench/components/RightTableLayout.vue";
import iconJson from "@/views/workbench/systemManage/icons.json";
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const iconList = ref([]);
const uitype = ref("Layui Icon");

const selectIcon = (type) => {
  uitype.value = type === 1 ? "Layui Icon" : "Element Plus Icon";
  ElMessage.success(uitype.value);
};

onMounted(() => {
  iconList.value = iconJson;
});
</script>

<style lang="scss" scoped>
@import "@/assets/icon/index.css";
@import "@/assets/icon/icon.css";

.icon-search-box {
  font-size: 1.5rem;
  color: #fff;
  font-weight: bold;
  padding: 1rem;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 1rem;
}

.site-doc-icon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.site-doc-icon-name {
  font-weight: bold;
  user-select: none;
  padding: 0.3rem;
}

.site-doc-icon-code {
  padding: 0.2rem;
  user-select: none;
}

.site-doc-icon-cls {
  padding: 0.2rem;
}

.site-doc-icon-item {
  width: 12rem;
  height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #ebeef5;
  background-color: #e3dada;
  border-radius: 4px;
  margin: 1rem;
  cursor: pointer;
  background-color: black;

  .layui-icon {
    font-size: 2rem !important;
  }

  &:hover {
    background-color: #333;
  }

  .site-doc-icon-img {
    width: 4rem;
  }
}
</style>
